<template>
	<view class="page_wrapper">
		<view class="first_block">
			<image src="@/static/images/coin.png" class="coin_icon" mode="aspectFit"></image>
			<view class="my_coin_block">
				<view class="coin_num">{{fczCoin.totalCoin}}</view>
				<view class="coin_txt">学习币</view>
			</view>
		</view>
		<view class="exchange_btn_block">
			<view class="exchange_btn" @tap="toExchangePrizeList()">立即兑换</view>
		</view>
		<view class="logs_block ">
			<view class="logs_title_block bottom_line">
				<view class="log_title">收支明细</view>
				<view class="help_btn">帮助说明</view>
			</view>
			<view class="log_block bottom_line" v-for="(log, index) in fczCoinLogs">
				<view class="left_block">
					<view class="coin_name">{{log.originTypeCn}}</view>
					<view class="coin_time">{{dateTimeFormat(log.createTime)}}</view>
				</view>
				<view class="right_block">
					{{log.coin}} 学习币
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	import {utils} from '@/utils/utils.js'
	import {parseTime} from '@/utils/index.js'
	export default {
		data() {
			return {
				fczCoin: {
					totalCoin: '0'
				},
				fczCoinLogs: []
			}
		},
		onShow() {
			this.fetchData()
			this.fetchFczCoinLogs()
		},
		methods: {
			dateTimeFormat(time) {
				console.log('time:' + time)
				return parseTime(new Date(time))
			},
			fetchData() {
				uni.showLoading()
				request.get( 
					'/fczCoins/my', {}
				).then(res => {
					uni.hideLoading()
					console.log(res.totalCoin)
					this.fczCoin = res
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			fetchFczCoinLogs() {
				request.get( 
					'/fczCoinLogs/my', {}
				).then(res => {
					console.log(res.totalCoin)
					this.fczCoinLogs = res.items
				}).catch(err => {
					console.log(err)
				})
			},
			toExchangePrizeList() {
				uni.navigateTo({
					url: '/pages/MyFczCoin/exchangePrizeList'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_wrapper{
		width: 100%;
		.first_block{
			width: 100%;
			height: 180px;
			background-color: lightseagreen;
			display: flex;
			flex-direction: column;
			align-items: center;
			.coin_icon{
				width: 80px;
				height: 80px;
				margin-top: 20px;
			}
			.my_coin_block{
				color: white;
				display: flex;
				align-items: center;
				.coin_num{
					font-size: 35px;
					font-weight: 500;
					margin-right: 10px;
				}
				.coin_txt{
					font-size: 14px;
				}
			}
		}
		.exchange_btn_block{
			display: flex;
			justify-content: center;
			margin-bottom: 20px;
			.exchange_btn{
				width: 200px;
				height: 40px;
				border-radius: 30px;
				border: 1px solid #e2e2e2;
				background-color: white;
				margin-top: -20px;
				display: flex;
				justify-content: center;
				align-items: center;
				letter-spacing: 10px;
			}
		}
		
		.logs_block{
			flex: 1;
			margin-left: 15px;
			margin-right: 15px;
			padding-bottom: 15px;
			overflow-y: scroll;
			display: flex;
			flex-direction: column;
			.logs_title_block{
				height: 30px;
				display: flex;
				justify-content: space-between;
				.log_title{
					font-size: 17px;
					font-weight: 500;
				}
				.help_btn{
					color: #444444;
					font-size: 14px;
				}
			}
			.log_block{
				height: 60px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 5px;
				.left_block{
					.coin_name{
						font-size: 15px;
						font-weight: 400;
					}
					.coin_time{
						font-size: 14px;
						color: #666666;
					}
				}
			}
		}
	}

</style>
